class ScreenTip {
  constructor() {
    this.screen = null
    this.style = null
    this.init()
  }

  init() {
    // 创建screen元素
    this.screen = document.createElement('div')
    this.screen.className = 'global-screen'
    this.screen.innerHTML = `
      <div class="screen-container">
        <div class="screen-tips">
          <svg t="1734512389921" class="tips-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4480" width="200" height="200"><path d="M71.168 369.152c13.312 0 25.6-8.192 29.696-19.968 35.84-91.136 102.4-168.448 187.392-218.112l-7.168 29.696c-4.096 17.408 6.656 34.816 24.064 39.424 17.408 4.096 34.816-6.656 39.424-24.064l24.576-97.28c1.024-5.12 1.024-9.728 0-14.848 0-0.512-0.512-1.024-0.512-1.536-0.512-2.048-1.536-4.096-2.56-5.632l-0.512-0.512c-0.512-1.024-1.024-2.048-2.048-3.072l-0.512-0.512c-3.584-5.12-8.192-8.704-13.824-10.752-1.024-0.512-1.536-0.512-2.56-1.024-0.512 0-1.024-0.512-2.048-0.512h-1.024l-90.624-31.232c-8.192-3.072-16.896-2.048-24.576 1.536s-13.312 10.24-16.384 18.432c-2.56 8.192-2.048 16.896 1.536 24.576s10.24 13.824 18.432 16.384l20.992 7.168c-95.744 57.344-171.52 145.408-212.48 248.832-4.096 10.24-2.56 20.992 3.072 30.208 6.144 7.68 16.384 12.8 27.648 12.8z" p-id="4481" fill="#ffffff"></path><path d="M936.448 5.12H501.76c-45.568 0-82.432 36.864-82.432 82.432V419.84H87.04c-45.568 0-82.432 36.864-82.432 82.432V936.96c0 45.568 36.864 82.432 82.432 82.432h848.896c45.568 0 82.432-36.864 82.432-82.432V87.552c0.512-45.568-36.352-82.432-81.92-82.432z m-434.688 65.024h434.688c9.728 0 17.408 7.68 17.408 17.408v333.824c-5.632-1.024-11.776-2.048-17.408-2.048h-452.096V87.04c0-9.216 7.68-16.896 17.408-16.896z m-431.616 431.616c0-9.728 7.68-17.408 17.408-17.408h848.896c9.728 0 17.408 7.68 17.408 17.408v434.688c0 9.728-7.68 17.408-17.408 17.408h-848.896c-9.728 0-17.408-7.68-17.408-17.408V501.76z" p-id="4482" fill="#ffffff"></path></svg>
          <p>请使用竖屏浏览体验更好</p>
        </div>
      </div>
    `

    // 创建样式
    this.style = document.createElement('style')
    this.style.textContent = `
      .global-screen {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 999;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(0, 0, 0, .8);
      }
      .screen-tips {
        color: #fff;
        text-align: center;
      }
      .tips-icon {
        width: 100px;
        height: 100px;
      }
    `
  }

  show() {
    try {
      document.body.appendChild(this.screen)
      document.head.appendChild(this.style)
    } catch (err) {
      console.log(err)
    }
  }

  hide() {
    try {
      document.body.removeChild(this.screen)
      document.head.removeChild(this.style)
    } catch (err) {
      console.log(err)
    }
  }
}

export const screenTip = new ScreenTip()
